<template>
	<view class="more-page">
		<view class="container">
			<view class="header">
				<view class="title">填写 真实信息 提高下款成功率</view>
				<image src="/static/icon_title_right.png" style="width: 22rpx;height: 30rpx; margin-right: 2%;" />
			</view>

			<view class="progress-section">
				<view class="progress-text">
					<view class="progress-line"></view>
					当前已完成90%，完成信息即可进行申请！
				</view>
			</view>

			<view class="form-container">
				<view class="input-group">
					<input class="input-field" placeholder-class="placeholder" placeholder="请输入你的姓名"
						v-model="name"></input>

				</view>

				<view class="age-gender-group">
					<input type="number" v-model="age" class="age-input" placeholder="请输入您的年龄"
						placeholder-class="placeholder" />
					<view class="gender-buttons">
						<button :class="{'gender-btn': true, 'active': isManActive}" @click="manActive()">男</button>
						<button :class="{'gender-btn': true, 'active': isWomenActive}" @click="womenActive()">女</button>
					</view>
				</view>

				<view class="location-group">
					<view class="location-content">
						<uni-icons type="location" size="20" color="#0066FF" />
						<text class="location-label">所在城市：</text>
						<text class="city-name">{{address}}</text>
					</view>
					<view class="change-city" @click="showDiaolog()">
						切换城市
					</view>
				</view>
			</view>
		</view>
		<!-- 以下是对话框 -->

		<view class="dialog-parent-container">
			<!-- 触发对话框显示的按钮 -->
			<!-- <button @click="showDialog = true">显示底部对话框</button> -->
			<!-- 对话框遮罩层 -->
			<view v-if="showDialog" class="dialog-mask" @click="showDialog = false"></view>
			<!-- 底部对话框 -->
			<view v-if="showDialog" class="dialog" :class="{ 'dialog-show': showDialog }">
				<view class="head-tilte-container" @click="back">
					<uni-icons type="left" color="#ccc" size="25" style="padding: 20rpx;"></uni-icons>
					<view class="dialog-title">{{ address === '' ? '请选择地址' : address }}</view>
				</view>

				<scroll-view class="scroll-container" scroll-y>
					<view class="grid-container">
						<text :data-text="data.name" @click="handleTextClick" class="custom-rectangle"
							v-for="(data, index) in dataList">{{data.name}}</text>
					</view>

				</scroll-view>

				<!-- <button @click="showDialog = false">关闭</button> -->
			</view>
		</view>

	</view>
</template>

<script>
	import request from '@/js/request.js';
	export default {
		data() {
			return {
				// 初始状态为未激活
				isManActive: true,
				isWomenActive: false,
				name: "", //姓名
				gender: 1, //1是男 0是女
				age: "", //年龄
				address: "", //地址
				showDialog: false,
				selectedArea: [],
				dataList: [],
				provinceList: [{
						"cities": [
							"北京"
						],
						"name": "北京"
					},
					{
						"cities": [
							"天津"
						],
						"name": "天津"
					},
					{
						"cities": [
							"石家庄",
							"唐山",
							"秦皇岛",
							"邯郸",
							"邢台",
							"保定",
							"张家口",
							"承德",
							"沧州",
							"廊坊",
							"衡水"
						],
						"name": "河北"
					},
					{
						"cities": [
							"太原",
							"大同",
							"阳泉",
							"长治",
							"晋城",
							"朔州",
							"晋中",
							"运城",
							"忻州",
							"临汾",
							"吕梁"
						],
						"name": "山西"
					},
					{
						"cities": [
							"呼和浩特",
							"包头",
							"乌海",
							"赤峰",
							"通辽",
							"鄂尔多斯",
							"呼伦贝尔",
							"巴彦淖尔",
							"乌兰察布",
							"兴安盟",
							"锡林郭勒盟",
							"阿拉善盟"
						],
						"name": "内蒙古"
					},
					{
						"cities": [
							"沈阳",
							"大连",
							"鞍山",
							"抚顺",
							"本溪",
							"丹东",
							"锦州",
							"营口",
							"阜新",
							"辽阳",
							"盘锦",
							"铁岭",
							"朝阳",
							"葫芦岛"
						],
						"name": "辽宁"
					},
					{
						"cities": [
							"长春",
							"吉林",
							"四平",
							"辽源",
							"通化",
							"白山",
							"松原",
							"白城",
							"延边朝鲜族自治州"
						],
						"name": "吉林"
					},
					{
						"cities": [
							"哈尔滨",
							"齐齐哈尔",
							"鸡西",
							"鹤岗",
							"双鸭山",
							"大庆",
							"伊春",
							"佳木斯",
							"七台河",
							"牡丹江",
							"黑河",
							"绥化",
							"大兴安岭地区"
						],
						"name": "黑龙江"
					},
					{
						"cities": [
							"上海"
						],
						"name": "上海"
					},
					{
						"cities": [
							"南京",
							"无锡",
							"徐州",
							"常州",
							"苏州",
							"南通",
							"连云港",
							"淮安",
							"盐城",
							"扬州",
							"镇江",
							"泰州",
							"宿迁"
						],
						"name": "江苏"
					},
					{
						"cities": [
							"杭州",
							"宁波",
							"温州",
							"嘉兴",
							"湖州",
							"绍兴",
							"金华",
							"衢州",
							"舟山",
							"台州",
							"丽水"
						],
						"name": "浙江"
					},
					{
						"cities": [
							"合肥",
							"芜湖",
							"蚌埠",
							"淮南",
							"马鞍山",
							"淮北",
							"铜陵",
							"安庆",
							"黄山",
							"滁州",
							"阜阳",
							"宿州",
							"六安",
							"亳州",
							"池州",
							"宣城"
						],
						"name": "安徽"
					},
					{
						"cities": [
							"福州",
							"厦门",
							"莆田",
							"三明",
							"泉州",
							"漳州",
							"南平",
							"龙岩",
							"宁德"
						],
						"name": "福建"
					},
					{
						"cities": [
							"南昌",
							"景德镇",
							"萍乡",
							"九江",
							"新余",
							"鹰潭",
							"赣州",
							"吉安",
							"宜春",
							"抚州",
							"上饶"
						],
						"name": "江西"
					},
					{
						"cities": [
							"济南",
							"青岛",
							"淄博",
							"枣庄",
							"东营",
							"烟台",
							"潍坊",
							"济宁",
							"泰安",
							"威海",
							"日照",
							"临沂",
							"德州",
							"聊城",
							"滨州",
							"菏泽"
						],
						"name": "山东"
					},
					{
						"cities": [
							"郑州",
							"开封",
							"洛阳",
							"平顶山",
							"安阳",
							"鹤壁",
							"新乡",
							"焦作",
							"濮阳",
							"许昌",
							"漯河",
							"三门峡",
							"南阳",
							"商丘",
							"信阳",
							"周口",
							"驻马店",
							"济源"
						],
						"name": "河南"
					},
					{
						"cities": [
							"武汉",
							"黄石",
							"十堰",
							"宜昌",
							"襄阳",
							"鄂州",
							"荆门",
							"孝感",
							"荆州",
							"黄冈",
							"咸宁",
							"随州",
							"恩施土家族苗族自治州"
						],
						"name": "湖北"
					},
					{
						"cities": [
							"长沙",
							"株洲",
							"湘潭",
							"衡阳",
							"邵阳",
							"岳阳",
							"常德",
							"张家界",
							"益阳",
							"郴州",
							"永州",
							"怀化",
							"娄底",
							"湘西土家族苗族自治州"
						],
						"name": "湖南"
					},
					{
						"cities": [
							"广州",
							"韶关",
							"深圳",
							"珠海",
							"汕头",
							"佛山",
							"江门",
							"湛江",
							"茂名",
							"肇庆",
							"惠州",
							"梅州",
							"汕尾",
							"河源",
							"阳江",
							"清远",
							"东莞",
							"中山",
							"潮州",
							"揭阳",
							"云浮"
						],
						"name": "广东"
					},
					{
						"cities": [
							"南宁",
							"柳州",
							"桂林",
							"梧州",
							"北海",
							"防城港",
							"钦州",
							"贵港",
							"玉林",
							"百色",
							"贺州",
							"池河",
							"来宾",
							"崇左"
						],
						"name": "广西"
					},
					{
						"cities": [
							"海口",
							"三亚",
							"三沙",
							"儋州"
						],
						"name": "海南"
					},
					{
						"cities": [
							"重庆"
						],
						"name": "重庆"
					},
					{
						"cities": [
							"成都",
							"自贡",
							"攀枝花",
							"泸州",
							"德阳",
							"绵阳",
							"广元",
							"遂宁",
							"内江",
							"乐山",
							"南充",
							"眉山",
							"宜宾",
							"广安",
							"达州",
							"雅安",
							"巴中",
							"资阳",
							"阿坝藏族羌族自治州",
							"甘孜藏族自治州",
							"凉山彝族自治州‌"
						],
						"name": "四川"
					},
					{
						"cities": [
							"贵阳",
							"六盘水",
							"遵义",
							"安顺",
							"毕节",
							"铜仁",
							"黔西南布依族苗族自治州",
							"黔东南苗族侗族自治州",
							"黔南布依族苗族自治州"
						],
						"name": "贵州"
					},
					{
						"cities": [
							"昆明",
							"曲靖",
							"玉溪",
							"保山",
							"昭通",
							"丽江",
							"普洱",
							"临沧",
							"楚雄彝族自治州",
							"红河哈尼族彝族自治州",
							"文山壮族苗族自治州",
							"西双版纳傣族自治州",
							"大理",
							"德宏傣族景颇族自治州",
							"怒江傈僳族自治州",
							"迪庆藏族自治州"
						],
						"name": "云南"
					},
					{
						"cities": [
							"拉萨",
							"日喀则",
							"昌都",
							"林芝",
							"山南",
							"那曲",
							"阿里地区"
						],
						"name": "西藏"
					},
					{
						"cities": [
							"西安",
							"铜川",
							"宝鸡",
							"咸阳",
							"渭南",
							"延安",
							"汉中",
							"榆林",
							"安康",
							"商洛"
						],
						"name": "陕西"
					},
					{
						"cities": [
							"兰州",
							"嘉峪关",
							"金昌",
							"白银",
							"天水",
							"武威",
							"张掖",
							"平凉",
							"酒泉",
							"庆阳",
							"定西",
							"陇南",
							"临夏回族自治州",
							"甘南藏族自治州"
						],
						"name": "甘肃"
					},
					{
						"cities": [
							"西宁",
							"海东",
							"海北藏族自治州",
							"黄南藏族自治州",
							"海南藏族自治州",
							"果洛藏族自治州",
							"玉树藏族自治州",
							"海西蒙古族藏族自治州"
						],
						"name": "青海"
					},
					{
						"cities": [
							"银川",
							"石嘴山",
							"吴忠",
							"固原",
							"中卫"
						],
						"name": "宁夏"
					},
					{
						"cities": [
							"乌鲁木齐",
							"克拉玛依",
							"吐鲁番",
							"哈密",
							"昌吉回族自治州",
							"博尔塔拉蒙古自治州",
							"巴音郭楞蒙古自治州",
							"阿克苏地区",
							"克孜勒苏柯尔克孜自治州",
							"喀什地区",
							"和田地区",
							"伊犁哈萨克自治州",
							"塔城地区",
							"阿勒泰地区"
						],
						"name": "新疆"
					},
					{
						"cities": [
							"台湾"
						],
						"name": "台湾"
					},
					{
						"cities": [
							"香港"
						],
						"name": "香港"
					},
					{
						"cities": [
							"澳门"
						],
						"name": "澳门"
					}
				]
			};
		},
		created() {
			this.locate();

			// this.dataList = this.provinceList;
		},

		watch: {
			//监听变化
			isManActive(newValue, oldValue) {
				if (newValue) {
					this.gender = 1;
				}
				this.sendDataToParent();

			},
			isWomenActive(newValue, oldValue) {
				if (newValue) {
					this.gender = 0;
				}
				// console.log("womenActive", newValue);
				this.sendDataToParent();

			},
			name(newValue, oldValue) {
				// console.log(newValue);
				this.sendDataToParent();
			},
			age(newValue, oldValue) {
				// console.log("age:", this.age);
				this.sendDataToParent();
			}
		},
		methods: {
			back() {
				this.resetData();

			},
			async locate() {
				try {
					// console.log("locate");
					var data = await request("/api/credit/getArea", {}, "GET");

					if (data.data.length == 1) { //定位成功
						var province = data.data[0].name;
						var city = data.data[0].cities[0];
						console.log("定位返回:", province, city);
						this.address = province + "-" + city;
						uni.showToast({
							title: '已经自动定位到：' + this.address,
							icon: 'none'
						});

					}


				} catch (error) {
					console.log("定位返回：", error);
					//TODO handle the exception
				}



			},
			sendDataToParent() {
				this.$emit('more-info', {
					name: this.name,
					age: this.age,
					gender: this.gender,
					address: this.address
				});

			},
			showDiaolog() {
				this.resetData();
				this.showDialog = true;

			},
			resetData() {
				this.dataList = this.provinceList;
				this.selectedArea = [];
				this.address = "";

			},
			manActive() {
				//点击男按钮
				// 切换激活状态
				this.isManActive = !this.isManActive;
				if (this.isManActive) {
					this.gender = 1;
					this.isWomenActive = false;
				}
			},
			womenActive() {
				//点击女按钮
				// 切换激活状态
				this.isWomenActive = !this.isWomenActive;
				if (this.isWomenActive) {
					this.gender = 0;
					this.isManActive = false;
				}
			},
			handleTextClick(event) {
				// name: '四川省',
				// cities: ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市',
				// 	'宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市'
				// ]
				const clickedText = event.currentTarget.dataset.text;
				if (this.address == "") {
					this.address = clickedText;
				} else {
					this.address = this.address + "-" + clickedText;
				}
				// console.log("address:", this.address);
				// if (!this.selectedArea.includes(clickedText)) {
				this.selectedArea.push(clickedText);
				if (this.selectedArea.length == 2) {
					this.showDialog = false;
					this.sendDataToParent();
				}
				// }
				//更新列表点击省后清空列表，填充为该省下面的市

				this.provinceList.forEach((item, index) => {
					if (item.name == clickedText) {
						this.dataList = [];
						item.cities.forEach((city, index) => {
							this.dataList.push({
								name: city
							});
						});
					}

				});
			}

		}
	};
</script>

<style scoped>
	.more-page {
		height: 100%;
		background-color: #fff;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
	}

	.container {
		min-height: 100%;
		padding: 0 32rpx;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 20rpx;
		background-color: #0E82E5;
		margin: 0 -32rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}

	.title {

		font-family: SimHei;
		font-size: 27rpx;
		color: #FFFFFF;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.progress-section {
		margin-top: 40rpx;
		margin-bottom: 60rpx;
	}

	.progress-text {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-family: SimHei;
		font-size: 26rpx;
		color: #0E82E5;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.progress-line {
		width: 8rpx;
		height: 32rpx;
		background-color: #0066FF;
		margin-right: 16rpx;
		border-radius: 4rpx;
	}

	.form-container {
		/* width: 500rpx; */
		/* background-color: #FFFFFF; */
		/* border-radius: 20rpx; */
		padding: 40rpx;
	}

	.input-field {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		padding-left: 20rpx;
		font-size: 25rpx;
		margin-bottom: 32rpx;

		background: #F2F3F5;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		/* display: inline-block; */
		/* 将文本元素转换为行内块元素，使其可以设置宽度和高度 */
		color: #999999;
		font-size: 29rpx;

		border-radius: 14rpx 14rpx 14rpx 14rpx;
		background: #F2F3F5;
		/* 设置固定宽度 */
		/* width: 600rpx; */
		height: 90rpx;

		/* 处理溢出文本 */
		overflow: hidden;
		/* 显示省略号 */
		text-overflow: ellipsis;
		/* 强制文本不换行 */
		white-space: nowrap;

	}

	.age-gender-group {

		display: flex;
		margin-bottom: 32rpx;
	}

	.age-input {
		color: #999999;
		font-size: 29rpx;
		width: 320rpx;
		height: 96rpx;
		background-color: #F5F6F7;
		border-radius: 14rpx;
		padding-left: 20rpx;
	}

	.gender-buttons {
		display: flex;
		flex-direction: row;
	}

	.gender-btn {
		width: 90.2rpx;
		height: 90.2rpx;
		line-height: 96rpx;
		text-align: center;
		background-color: #F2F3F5;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		font-size: 30rpx;
		color: #333333;
		margin-left: 30rpx;

	}

	.gender-btn.active {
		width: 90.2rpx;
		height: 90.2rpx;
		line-height: 96rpx;
		text-align: center;
		background-color: #0E82E5;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		font-size: 30rpx;
		margin-left: 30rpx;
		color: #FFFFFF;
	}

	.location-group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		background-color: #D1E6FF;
		border-radius: 12rpx;

	}

	.location-content {
		padding: 20rpx;
		display: flex;
		align-items: center;
	}

	.location-label {
		font-size: 14px;
		color: #999999;
		margin-left: 16rpx;
	}

	.city-name {
		font-size: 14px;
		color: #333333;
	}

	.change-city {
		margin-right: 30rpx;
		font-family: SimHei;
		font-size: 24rpx;
		color: #1F7AFE;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

	}

	.placeholder {
		color: #999999;
	}



	/* 容器样式 */
	.dialog-parent-container {
		padding: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 对话框遮罩层样式 */
	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	/* 底部对话框样式 */
	.dialog {
		position: fixed;
		bottom: -200px;
		/* 初始位置在屏幕底部下方 */
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		/* padding: 20px; */
		transition: bottom 0.3s ease;
		z-index: 1000;
	}

	/* 对话框显示时的样式 */
	.dialog-show {
		bottom: 0;
		/* 显示时移动到屏幕底部 */
	}

	/* 对话框标题样式 */
	.dialog-title {
		font-size: 30rpx;
		/* font-weight: bold; */
		/* margin-top: 30rpx; */
		/* margin-bottom: 30rpx; */
		text-align: center;
	}

	.head-tilte-container {
		/* 使用 Flexbox 布局 */
		display: flex;
		/* 元素水平排列 */
		flex-direction: row;
		/* 容器高度包裹内容 */
		height: auto;
		/* 垂直居中对齐 */
		align-items: center;
		/* 容器内边距 */
		/* padding: 10px; */
	}

	/* 对话框内容样式 */
	.dialog-content {
		margin-bottom: 20px;
		text-align: center;
	}

	.grid-container {
		/* 设置为网格布局 */
		display: grid;
		/* 定义两列，每列宽度为 1fr（平均分配剩余空间） */
		grid-template-columns: 1fr 1fr;
		/* 列与列之间的间距 */
		grid-column-gap: 10px;
		/* 行与行之间的间距 */
		grid-row-gap: 10px;
		/* 容器内边距 */
		padding: 10px;
	}

	/* 矩形框样式 */
	.custom-rectangle {

		width: 313rpx;
		height: 97rpx;
		font-size: 30rpx;
		border-radius: 14rpx;
		border: 1px solid #999999;
		/* 设置为弹性布局 */
		display: flex;
		/* 子元素在主轴上居中对齐（水平居中） */
		justify-content: center;
		/* 子元素在交叉轴上居中对齐（垂直居中） */
		align-items: center;
	}

	/* 滚动容器样式 */
	.scroll-container {
		max-height: 700rpx;
		overflow-y: auto;
	}
</style>